<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style type="text/css">
  body{
    margin: 0;
    padding: 0;
    background:#333;
  }
  #container{
    position: relative;
    width: 90%;
    margin: 40px auto;
  }
  .item{
    margin-bottom: 20px;
    background:#fff;
  }
  .footer{
    height: 200px;
    background: #555;
  }
</style>
</head>
<body>
<div id="container"></div>
<div class="footer"></div>
<script type="text/javascript" src="src/stick.js"></script>
<script type="text/javascript">

//定义瀑布流组件
var stick = new Stick({
  container: document.getElementById('container'),
  column_width: 200,
  column_gap: 10,
  load_spacing: 200,
  onNeedMore: loadMore
});
//加载第一页
loadMore();

/**
 * 模拟ajax加载，提供假数据
 **/
var loadTime = 0;
function loadMore(){
  //模拟加载完毕
  if(++loadTime >= 5){
    return
  }
  //模拟ajax延迟
  setTimeout(function(){
    list = [
      {},{},{},{},{},{},{},{},
      {},{},{},{},{},{},{},{}
    ];
    list.forEach(function(item) {
      var html= '<div class="item" style="height:' + Math.floor(Math.random() * 250 + 150) + 'px">';
      stick.addItem(html, item.cover);
    });
  },300);
}
</script>
</body>
</html>